<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="../librarys/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../librarys/font-awesome-4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../styles/checkbox3.min.css">
    <link rel="stylesheet" href="../styles/css.css">
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="../styles/basic.css">
    <script src="../librarys/bootstrap/js/respond.js"></script>
    <script src="../librarys/bootstrap/js/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
<!--头部-->
<div class="index-header">
    <div class="index-header-main">
        <a href="#">收藏本站<i class="fa fa-star index-header-icon"></i> </a>
        <p class="index-header-right">
            <a href="#" class="index-header-a-border">登录</a>
            <a href="#">我的订单</a>
        </p>
    </div>
</div>
<!--logo-->
<div class="index-logo">
    <!--logo-->
    <div class="index-logo-img"></div>
    <!--购物车-->
    <div class="shop-cart-txt">购物车</div>
    <!--搜索框-->
    <form action="#">
        <div class="index-logo-search shop-cart-search">
            <i class="fa fa-search index-logo-search-icon"></i>
            <input type="text" placeholder="搜索商家、店铺、服务" class="index-logo-search-input">
            <input type="submit" value="搜索" class="index-logo-search-button">
            <p class="index-logo-search-hot"><i>热门搜索：</i><a href="#">中式婚礼</a><a href="#">西式婚礼</a><a href="#">小清新风格</a><a
                    href="#">汉朝婚礼</a></p>
        </div>
    </form>
</div>
<!--购物车导航-->
<div class="index-banner-title">
    <div class="hd">
        <ul>
            <li>全部商品<i>(3)</i></li>
            <li>降价商品<i>(1)</i></li>
            <li>优惠商品<i>(3)</i></li>
        </ul>
    </div>
    <div class="bd">
        <ul>
            <li>
                <div class="shop-cart-content">
                    <form>
                        <div class="shop-cart-content-title">
                            <div class="checkbox3 checkbox-success checkbox-inline checkbox-inline2 checkbox-check checkbox-round shop-cart-content-title-all">
                                <input class="input-onclick-all ie8 input-checked" type="checkbox" id="checkbox-fa-1"
                                       value="1">
                                <label for="checkbox-fa-1" class="shop-cart-content-title-label">
                                    全选
                                </label>
                            </div>
							
							<div class="checkbox3 checkbox-info checkbox-round checkbox-check checkbox-inline checkbox-inline2">
								<input type="checkbox" id="checkbox-2" checked>
								<label for="checkbox-2">
									Option1
								</label>
							</div>
							
							
							
							
                            <span class="shop-cart-content-title-message">商品信息</span>
                            <span class="shop-cart-content-title-quantity">数量</span>
                            <span class="shop-cart-content-title-money">金额</span>
                            <span class="shop-cart-content-title-done">操作</span>
                        </div>
                        <div class="shop-cart-all-container" id="all-shop-all">
                            <div class="shop-cart-content-container mb40">
                                <div class="checkbox3 checkbox-success checkbox-inline checkbox-check checkbox-round shop-cart-content-title-all pl15">
                                    <input class="input-onclick input-checked ie8" type="checkbox" id="all-shop"
                                           value="1" name="box">
                                    <label for="all-shop" class="shop-cart-content-title-label">
                                        <span>店铺：<em>PIXELFILM婚礼摄影工作室</em></span>
                                    </label>
                                </div>
                                <div class="shop-cart-container">
                                    <div class="shop-cart-container-detail">
                                        <div class="checkbox3 checkbox-success checkbox-inline checkbox-check checkbox-round mt-5">
                                            <input type="checkbox" id="checkbox-fa-3" name="box" class="input-checked">
                                            <label for="checkbox-fa-3" class="shop-cart-content-title-label">
                                            </label>
                                        </div>
                                        <a class="shop-cart-a-img" href="#"><img src="../images/shop-cart-img.jpg"></a>
                                        <span class="shop-cart-content-title-message ml35 mt5 fl">婚礼摄影 摄像师 商业会议摄影<br>+摄像跟拍拍摄服务 拍照</span>
                                        <div class="shop-cart-content-title-quantity mt40">
                                            <div class="shop-cart-content-people">
                                                <a href="#" class="qianzheng1-main-visa-people-minus">-</a>
                                                <input class="qianzheng1-main-visa-people-input" value="1">
                                                <a href="#" class="qianzheng1-main-visa-people-plus">+</a>
                                            </div>
                                        </div>
                                        <span class="shop-cart-content-title-money shop-cart-content-title-money1">800.00</span>
                                        <a class="shop-cart-content-title-quantity shop-cart-content-title-quantity1">删除</a>
                                    </div>
                                    <div class="shop-cart-container-detail border-bottom">
                                        <div class="checkbox3 checkbox-success checkbox-inline checkbox-check checkbox-round mt-5">
                                            <input type="checkbox" id="checkbox-fa-4" name="box" class="input-checked">
                                            <label for="checkbox-fa-4" class="shop-cart-content-title-label">
                                            </label>
                                        </div>
                                        <a class="shop-cart-a-img" href="#"><img src="../images/shop-cart-img.jpg"></a>
                                        <span class="shop-cart-content-title-message ml35 mt5 fl">婚礼摄影 摄像师 商业会议摄影<br>+摄像跟拍拍摄服务 拍照</span>
                                        <div class="shop-cart-content-title-quantity mt40">
                                            <div class="shop-cart-content-people">
                                                <a href="#" class="qianzheng1-main-visa-people-minus">-</a>
                                                <input class="qianzheng1-main-visa-people-input" value="1">
                                                <a href="#" class="qianzheng1-main-visa-people-plus">+</a>
                                            </div>
                                        </div>
                                        <span class="shop-cart-content-title-money shop-cart-content-title-money1">800.00</span>
                                        <a class="shop-cart-content-title-quantity shop-cart-content-title-quantity1">删除</a>
                                    </div>
                                </div>
                            </div>
                            <div class="shop-cart-content-container mb40">
                                <div class="checkbox3 checkbox-success checkbox-inline checkbox-check checkbox-round shop-cart-content-title-all pl15">
                                    <input id="checkbox-fa-7" class="input-onclick input-checked ie8" type="checkbox"
                                           value="1" name="box">
                                    <label for="checkbox-fa-7" class="shop-cart-content-title-label">
                                        <span>店铺：<em>PIXELFILM婚礼摄影工作室</em></span>
                                    </label>
                                </div>
                                <div class="shop-cart-container">
                                    <div class="shop-cart-container-detail">
                                        <div class="checkbox3 checkbox-success checkbox-inline checkbox-check checkbox-round mt-5">
                                            <input type="checkbox" id="checkbox-fa-5" name="box" class="input-checked">
                                            <label for="checkbox-fa-5" class="shop-cart-content-title-label">
                                            </label>
                                        </div>
                                        <a class="shop-cart-a-img" href="#"><img src="../images/shop-cart-img.jpg"></a>
                                        <span class="shop-cart-content-title-message ml35 mt5 fl">婚礼摄影 摄像师 商业会议摄影<br>+摄像跟拍拍摄服务 拍照</span>
                                        <div class="shop-cart-content-title-quantity mt40">
                                            <div class="shop-cart-content-people">
                                                <a href="#" class="qianzheng1-main-visa-people-minus">-</a>
                                                <input class="qianzheng1-main-visa-people-input" value="1">
                                                <a href="#" class="qianzheng1-main-visa-people-plus">+</a>
                                            </div>
                                        </div>
                                        <span class="shop-cart-content-title-money shop-cart-content-title-money1">800.00</span>
                                        <a class="shop-cart-content-title-quantity shop-cart-content-title-quantity1">删除</a>
                                    </div>
                                    <div class="shop-cart-container-detail">
                                        <div class="checkbox3 checkbox-success checkbox-inline checkbox-check checkbox-round mt-5">
                                            <input type="checkbox" id="checkbox-fa-6" name="box" class="input-checked">
                                            <label for="checkbox-fa-6" class="shop-cart-content-title-label">
                                            </label>
                                        </div>
                                        <a class="shop-cart-a-img" href="#"><img src="../images/shop-cart-img.jpg"></a>
                                        <span class="shop-cart-content-title-message ml35 mt5 fl">婚礼摄影 摄像师 商业会议摄影<br>+摄像跟拍拍摄服务 拍照</span>
                                        <div class="shop-cart-content-title-quantity mt40">
                                            <div class="shop-cart-content-people">
                                                <a href="#" class="qianzheng1-main-visa-people-minus">-</a>
                                                <input class="qianzheng1-main-visa-people-input" value="1">
                                                <a href="#" class="qianzheng1-main-visa-people-plus">+</a>
                                            </div>
                                        </div>
                                        <span class="shop-cart-content-title-money shop-cart-content-title-money1">800.00</span>
                                        <a class="shop-cart-content-title-quantity shop-cart-content-title-quantity1">删除</a>
                                    </div>
                                    <div class="shop-cart-container-detail border-bottom">
                                        <div class="checkbox3 checkbox-success checkbox-inline checkbox-check checkbox-round mt-5">
                                            <input type="checkbox" name="box" class="input-checked">
                                            <label class="shop-cart-content-title-label"></label>
                                        </div>
                                        <a class="shop-cart-a-img" href="#"><img src="../images/shop-cart-img.jpg"></a>
                                        <span class="shop-cart-content-title-message ml35 mt5 fl">婚礼摄影 摄像师 商业会议摄影<br>+摄像跟拍拍摄服务 拍照</span>
                                        <div class="shop-cart-content-title-quantity mt40">
                                            <div class="shop-cart-content-people">
                                                <a href="javascript:;" class="qianzheng1-main-visa-people-minus">-</a>
                                                <input class="qianzheng1-main-visa-people-input" value="1">
                                                <a href="javascript:;" class="qianzheng1-main-visa-people-plus">+</a>
                                            </div>
                                        </div>
                                        <span class="shop-cart-content-title-money shop-cart-content-title-money1">800.00</span>
                                        <a class="shop-cart-content-title-quantity shop-cart-content-title-quantity1">删除</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--结算-->
                        <div class="shop-cart-foot-fix">
                            <div class="checkbox3 checkbox-success checkbox-inline checkbox-inline1 checkbox-check checkbox-round shop-cart-content-title-all pl15">
                                <input class="input-onclick-all input-checked" type="checkbox" id="checkbox-fa-8"
                                       value="1">
                                <label for="checkbox-fa-8" class="shop-cart-content-title-label">
                                    全选
                                </label>
                            </div>
                            <span class="shop-cart-foot-fix-delete">删除</span>
                            <span class="shop-cart-foot-fix-quantity ">已选商品<b id="allnumber"
                                                                              class="vertical-middle"> 0 </b>件</span>
                            <span id="allmoney" class="shop-cart-foot-fix-money">合计： <b
                                    class="vertical-middle">800.00</b></span>
                            <a href="pay.html" class="shop-cart-foot-fix-account">结算</a>
                        </div>
                    </form>
                </div>
            </li>
        </ul>
    </div>
</div>
<script src="../scripts/jquery-1.10.1.min.js"></script>
<script src="../librarys/bootstrap/js/bootstrap.min.js"></script>
<script src="../librarys/superslider/jquery.SuperSlide.2.1.1.js"></script>
<script>
    jQuery(".detail-main-item2-right").slide({trigger: "click"});
    jQuery(".index-banner-title").slide({trigger: "click"});

</script>
<script>
    $(document).ready(function () {
        $('.input-onclick').click(function () {
            this.value == 1 ? this.value = 2 : this.value = 1;
            var checkboxs = $(this).parent('.checkbox-check').siblings('.shop-cart-container').find('input.input-checked');
            for (var i = 0; i < checkboxs.length; i++) {
                if (this.value == 1) {
                    checkboxs[i].checked = false;
                } else {
                    checkboxs[i].checked = true;
//                    doStaticNumber(this,true);
                }
            }
            doChange();
//            doStaticNumber(this,true);
        });
        $('.input-onclick-all').click(function () {
            this.value == 1 ? this.value = 2 : this.value = 1;
            var checkboxs = $(this).parents('.shop-cart-content').find('input.input-checked');
            for (var i = 0; i < checkboxs.length; i++) {
                if (this.value == 1) {
                    checkboxs[i].checked = false;
                } else {
                    checkboxs[i].checked = true;
                }
            }
            doChange();
//            doStaticNumber(this,true);
        });
        $('.input-checked').click(function () {
            doChange();
        })
        $(".qianzheng1-main-visa-people-minus").click(function () {
            doDeal(this, true);
            doChange();
            return false;
        });

        $(".qianzheng1-main-visa-people-plus").click(function () {
            doDeal(this);
            doChange();
            return false;
        });
        function doDeal(src, subtract) {
            var num_obj = $(src).parent().find('input');
            var num = parseInt(num_obj.val());
            var money_obj = $(src).parent().parent().next();
            var money = parseInt(money_obj.text());
            if (subtract) {
                if (num == 1) {
                    return false;
                }
                num--;
                money -= parseInt(money_obj.attr('data-money'));
            }
            else {
                num++;
                if (typeof(money_obj.attr('data-money')) == 'undefined') {
                    money_obj.attr('data-money', money);
                }
                money += parseInt(money_obj.attr('data-money'));
            }
            num_obj.val(num);
            money_obj.text(money);
        }

        function doChange() {
            var money = 0;
            var num = 0;
            $('.shop-cart-container :checkbox:checked').each(function () {
                money += parseInt($(this).parent().siblings('span:last').text());
                num += parseInt($(this).parent().siblings('div').find('input').val());
            });
            $('#allnumber').text(num);
            $('#allmoney b').text(money);
        }

        $(".shop-cart-content-title-quantity, .shop-cart-content-title-quantity1").on("click", function () {
            var del = $(this);
            var cart = $(del.parent());
            cart.remove();
        });
        $(".shop-cart-foot-fix-delete").on("click", function () {
//            $('#all-shop-all').remove();

            $(this).parents().siblings(".shop-cart-all-container").closest(".shop-cart-all-container").remove();
//            $(this).closest(".shop-cart-all-container").remove();

//            $(".shop-cart-content-container").each(function () {
////                var del = $(this);
////                var cart = $(del.parents('.shop-cart-content-container mb40'));
////                cart.remove();
////                $(this).closest(".shop-cart-content-container").remove();
//                $(this).remove();
//            });
        });





    });
</script>
</body>
</html>